<template>
  <view class="member-container">
    <!-- 会员头部 -->
    <view class="member-header">
      <view class="header-bg">
        <image 
          src="https://images.unsplash.com/photo-1494976388531-d1058494cdd8?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" 
          mode="aspectFill" 
          class="header-image"
        ></image>
        <view class="header-overlay"></view>
        <view class="header-content">
          <view class="user-info">
            <u-avatar 
              :src="userInfo?.avatar || 'https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80'" 
              size="80"
            ></u-avatar>
            <view class="user-details">
              <text class="nickname">{{ userInfo?.nickname || '未登录' }}</text>
              <view class="member-level">
                <u-tag 
                  text="普通会员" 
                  type="warning" 
                  size="mini" 
                  v-if="!isVip"
                />
                <u-tag 
                  text="VIP会员" 
                  type="error" 
                  size="mini" 
                  v-else
                />
                <text class="upgrade" @click="upgradeMember" v-if="!isVip">升级 ></text>
              </view>
            </view>
          </view>
          
          <view class="member-benefits">
            <view class="benefit-item">
              <text class="benefit-value">{{ userInfo?.points || 0 }}</text>
              <text class="benefit-label">积分</text>
            </view>
            <view class="benefit-item">
              <text class="benefit-value">{{ couponCount }}</text>
              <text class="benefit-label">优惠券</text>
            </view>
            <view class="benefit-item">
              <text class="benefit-value">{{ discountRate }}折</text>
              <text class="benefit-label">专享折扣</text>
            </view>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 会员特权 -->
    <view class="section-title">
      <text class="title">会员特权</text>
    </view>
    
    <view class="privileges-grid">
      <view class="privilege-item">
        <view class="privilege-icon bg-orange">
          <u-icon name="coupon" size="40" color="#fff"></u-icon>
        </view>
        <text class="privilege-text">专享优惠券</text>
      </view>
      
      <view class="privilege-item">
        <view class="privilege-icon bg-blue">
          <u-icon name="clock" size="40" color="#fff"></u-icon>
        </view>
        <text class="privilege-text">优先预约</text>
      </view>
      
      <view class="privilege-item">
        <view class="privilege-icon bg-purple">
          <u-icon name="gift" size="40" color="#fff"></u-icon>
        </view>
        <text class="privilege-text">生日礼包</text>
      </view>
      
      <view class="privilege-item">
        <view class="privilege-icon bg-green">
          <u-icon name="integral" size="40" color="#fff"></u-icon>
        </view>
        <text class="privilege-text">双倍积分</text>
      </view>
    </view>
    
    <!-- 会员活动 -->
    <view class="section-title">
      <text class="title">会员活动</text>
    </view>
    
    <view class="activities-list">
      <view class="activity-item" @click="goToActivity('sign')">
        <view class="activity-icon bg-blue">
          <u-icon name="calendar" size="40" color="#fff"></u-icon>
        </view>
        <view class="activity-content">
          <text class="activity-title">每日签到</text>
          <text class="activity-desc">签到送积分，连续签到有惊喜</text>
        </view>
        <u-icon name="arrow-right" size="24" color="#999"></u-icon>
      </view>
      
      <view class="activity-item" @click="goToActivity('invite')">
        <view class="activity-icon bg-orange">
          <u-icon name="share" size="40" color="#fff"></u-icon>
        </view>
        <view class="activity-content">
          <text class="activity-title">邀请好友</text>
          <text class="activity-desc">邀请好友注册，双方各得奖励</text>
        </view>
        <u-icon name="arrow-right" size="24" color="#999"></u-icon>
      </view>
      
      <view class="activity-item" @click="goToActivity('lottery')">
        <view class="activity-icon bg-purple">
          <u-icon name="gift" size="40" color="#fff"></u-icon>
        </view>
        <view class="activity-content">
          <text class="activity-title">积分抽奖</text>
          <text class="activity-desc">积分兑换抽奖机会，100%中奖</text>
        </view>
        <u-icon name="arrow-right" size="24" color="#999"></u-icon>
      </view>
    </view>
    
    <!-- 升级会员按钮 -->
    <view class="upgrade-section" v-if="!isVip">
      <u-button type="error" @click="upgradeMember">立即升级为VIP会员</u-button>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { useUserStore } from '@/store/user'

// 用户store
const userStore = useUserStore()

// 用户信息
const userInfo = computed(() => userStore.getUserInfo)

// 是否登录
const isLogin = computed(() => userStore.getIsLogin)

// 是否VIP会员
const isVip = ref(false)

// 优惠券数量
const couponCount = ref(3)

// 会员折扣率
const discountRate = computed(() => {
  return isVip.value ? '8.5' : '9.5'
})

// 升级会员
const upgradeMember = () => {
  if (!isLogin.value) {
    uni.showToast({ title: '请先登录', icon: 'none' })
    return
  }
  
  uni.showModal({
    title: '升级会员',
    content: '升级为VIP会员可享受更多特权，是否立即升级？',
    success: (res) => {
      if (res.confirm) {
        uni.showToast({ title: '升级成功', icon: 'success' })
        isVip.value = true
      }
    }
  })
}

// 跳转到活动页面
const goToActivity = (type: string) => {
  switch (type) {
    case 'sign':
      uni.showToast({ title: '每日签到功能开发中', icon: 'none' })
      break
    case 'invite':
      uni.navigateTo({ url: '/pages/invite/index' })
      break
    case 'lottery':
      uni.showToast({ title: '积分抽奖功能开发中', icon: 'none' })
      break
  }
}
</script>

<style lang="scss" scoped>
.member-container {
  background-color: #f5f5f5;
  min-height: 100vh;
  padding-bottom: 20rpx;
}

.member-header {
  position: relative;
  margin-bottom: 20rpx;
  
  .header-bg {
    position: relative;
    height: 400rpx;
    
    .header-image {
      width: 100%;
      height: 100%;
    }
    
    .header-overlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(to bottom, rgba(0,0,0,0.3), rgba(0,0,0,0.7));
    }
    
    .header-content {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      padding: 40rpx;
      z-index: 2;
      
      .user-info {
        display: flex;
        align-items: center;
        margin-bottom: 40rpx;
        
        .user-details {
          margin-left: 30rpx;
          flex: 1;
          
          .nickname {
            display: block;
            font-size: 36rpx;
            font-weight: bold;
            color: #fff;
            margin-bottom: 15rpx;
          }
          
          .member-level {
            display: flex;
            align-items: center;
            
            .upgrade {
              font-size: 24rpx;
              color: rgba(255,255,255,0.9);
              margin-left: 20rpx;
            }
          }
        }
      }
      
      .member-benefits {
        display: flex;
        justify-content: space-around;
        
        .benefit-item {
          text-align: center;
          
          .benefit-value {
            display: block;
            font-size: 40rpx;
            font-weight: bold;
            color: #fff;
            margin-bottom: 10rpx;
          }
          
          .benefit-label {
            font-size: 24rpx;
            color: rgba(255,255,255,0.9);
          }
        }
      }
    }
  }
}

.section-title {
  padding: 0 20rpx 20rpx;
  
  .title {
    font-size: 36rpx;
    font-weight: bold;
    color: #333;
    padding-left: 20rpx;
    border-left: 10rpx solid #007aff;
  }
}

.privileges-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20rpx;
  background-color: #fff;
  padding: 40rpx 20rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.05);
  
  .privilege-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    
    .privilege-icon {
      width: 80rpx;
      height: 80rpx;
      border-radius: 20rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 15rpx;
      
      &.bg-blue {
        background-color: #007aff;
      }
      
      &.bg-orange {
        background-color: #ff9900;
      }
      
      &.bg-purple {
        background-color: #668cff;
      }
      
      &.bg-green {
        background-color: #07c160;
      }
    }
    
    .privilege-text {
      font-size: 24rpx;
      color: #333;
      text-align: center;
    }
  }
}

.activities-list {
  background-color: #fff;
  margin-bottom: 20rpx;
  box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.05);
  
  .activity-item {
    display: flex;
    align-items: center;
    padding: 30rpx 20rpx;
    border-bottom: 1rpx solid #f0f0f0;
    
    .activity-icon {
      width: 80rpx;
      height: 80rpx;
      border-radius: 20rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 20rpx;
      
      &.bg-blue {
        background-color: #007aff;
      }
      
      &.bg-orange {
        background-color: #ff9900;
      }
      
      &.bg-purple {
        background-color: #668cff;
      }
    }
    
    .activity-content {
      flex: 1;
      
      .activity-title {
        display: block;
        font-size: 32rpx;
        color: #333;
        margin-bottom: 10rpx;
      }
      
      .activity-desc {
        font-size: 24rpx;
        color: #999;
      }
    }
    
    &:last-child {
      border-bottom: none;
    }
  }
}

.upgrade-section {
  padding: 0 20rpx;
  
  .u-button {
    height: 80rpx;
    font-size: 32rpx;
  }
}
</style>